<template>
  <div :id="localUUID" class="c-chartradio"></div>
</template>

<script>
import moment from 'moment'
import { Chart, registerShape } from '@antv/g2'
import { createUUID } from '@/common/js/mUtils'
import componentRefresh from '@/mixins/componentRefresh'
// 准备数据
const DATA = []
export default {
  name: 'CChartradio',
  mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    ratio: {
      type: Number,
      default: 1
    },
    uuid: String
  },
  data() {
    return {
      localUUID: createUUID()
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        let dataobj = '{}'
        try {
          dataobj = JSON.parse(result)
        } catch (e) {
          console.warn(e)
          this.$message.error('JSON格式有误请重试')
          dataobj = {}
        }
        return dataobj
      } else {
        return DATA
      }
    },
    modelTrigger() {
      return this.props[1].fields[0].value.dataJson.model
    },
    LegendTextColor() {
      return this.props[0].fields[3].value[0].value.value
    },
    // LegendStyle() {
    // 	return this.props[0].fields[3].value[1].value.value;
    // },
    // LegendAlign() {
    // 	return this.props[0].fields[3].value[2].value.value;
    // },
    // LegendPosition() {
    // 	return this.props[0].fields[3].value[3].value.value;
    // },
    ChageColor() {
      return this.props[0].fields[3].value[1].value.value
    },
    RowColor1() {
      return this.props[0].fields[3].value[2].value.value
    },
    RowColor2() {
      return this.props[0].fields[3].value[3].value.value
    }
    // msg() {
    // 	return this.props[0].fields[3].value[4].value.value;
    // },
  },
  watch: {
    dataTrigger(val) {
      if (val && this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    modelTrigger() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    LegendTextColor(val) {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    ChageColor() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    RowColor1() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    RowColor2() {
      if (this.chartInstance) {
        this.chartInstance.destroy()
        this.initData()
      }
    },
    // msg() {
    // 	if (this.chartInstance) {
    // 		this.chartInstance.destroy();
    // 		this.initData();
    // 	}
    // },
    width(val) {
      this.resizeChart()
    },
    height(val) {
      this.resizeChart()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.initMapping()

      this.chartInstance = new Chart({
        container: this.localUUID,
        autoFit: false,
        width: width,
        height: height
      })
      this.chartInstance.data(this.dataTrigger)

      const pos = `${this.mappings[1].field}` // 映射字段

      this.legend()
      this.chartInstance.tooltip({
        showMarkers: false
      })
      let data = []
      data = [this.dataTrigger[0]]
      let color
      color = this.LegendTextColor
      data.push({
        [this.mappings[0].field]: '其他',
        [this.mappings[1].field]: 100 - this.dataTrigger[0][this.mappings[1].field]
      })
      this.chartInstance.data(data)
      this.chartInstance.coordinate('theta', {
        radius: 0.8,
        innerRadius: 0.75
      })
      this.chartInstance
        .interval()
        .adjust('stack')
        .position(pos)
        .color(`${this.mappings[0].field}`, [color, this.ChageColor])
        .style({
          opacity: 1
        })
      this.chartInstance.annotation().text({
        position: ['50%', '50%'],
        content: data[0][this.mappings[0].field],
        style: {
          fontSize: 22,
          fill: this.RowColor1,
          fontWeight: 300,
          textBaseline: 'bottom',
          textAlign: 'center'
        },
        offsetY: -12
      })

      this.chartInstance.annotation().text({
        position: ['50%', '50%'],
        content: this.dataTrigger[0][this.mappings[1].field],
        style: {
          fontSize: 30,
          fill: this.RowColor2,
          fontWeight: 500,
          textAlign: 'center'
        },
        offsetY: 10
      })

      this.chartInstance.interaction('element-active')

      this.chartInstance.render()
    },
    initMapping() {
      const model = this.props[1].fields[0].value.dataJson.model
      this.mappings = model.map(m => {
        const field = m.field
        const mapping = m.mapping
        const key = mapping || field
        return { field: key }
      })
      if (!this.props[1].fields[0].value.dataJson.json) {
        this.mappings = [
          { field: 'type' },
          {
            field: 'value'
          }
        ]
      }
    },
    resizeChart() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.chartInstance.changeSize(width, height)
    },
    legend() {
      this.chartInstance.legend(false)
    }
  }
}
</script>

<style>
.c-chartcolumnar {
  width: 100%;
  height: 100%;
}
</style>
